<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2025/1/5
  Time: 16:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <title>点歌界面</title>
  <link rel="stylesheet" href="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="<%=request.getContextPath()%>/static/plugins/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
  <style>
    .backgroundImage{
      /* 设置背景图，根据实际情况修改图片路径 */
      background-image: url('<%=request.getContextPath()%>/static/images/logo/requestSongBackground.png');
      background-size: cover; /* 使背景图覆盖整个元素 */
      background-repeat: no-repeat; /* 不重复平铺背景图 */
      background-position: center center; /* 背景图居中显示 */
      position: relative; /* 相对定位，为伪元素提供定位上下文 */
    }
    .backgroundImage::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.5); /* 半透明的白色，可根据需要调整颜色和透明度 */
      z-index: 1; /* 确保在背景图之上 */
    }
  </style>
</head>
<body>
<div class="row">
  <div class="col-3"></div>
  <div class="col-6 mt-5 ">
    <div class="col-md-12 backgroundImage">
      <div class="card-body">
        <h5 class="card-title text-center">点歌给他</h5>
        <p class="card-text">
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">歌曲名称</label>
        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="titleHelp" name="title">
        <small id="titleHelp" class="form-text text-muted">请输入正确的歌曲名称.</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">用户名</label>
        <input type="password" class="form-control" id="exampleInputPassword1" name="username">
        <small id="usernameHelp" class="form-text text-muted">请输入正确的用户名.</small>
      </div>
        <div class="d-flex justify-content-center">
          <button type="submit" class="btn btn-primary">点歌</button>
        </div>

      </form>
        </p>
      </div>
    </div>
  </div>
  <div class="col-3"></div>
</div>
<script src="<%=request.getContextPath()%>/static/plugins/jquery/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
<script src="<%=request.getContextPath()%>/static/js/util.js"></script>
<script src="<%=request.getContextPath()%>/static/js/user/personalCenter.js"></script>
</body>
</html>
